<template>
    <div class="MouseFocusCoordinate">
        <!-- 比例尺面板 -->
        <!--        <div class="coordinate-container">-->
        <!--            <div class="coordinate-label">X:{{ lng }}</div>-->
        <div class="coordinate-label" @click="changeType">
<!--            <div class="coordinate-section-short"><span>带号</span> <span>17N</span></div>-->
            <div class="coordinate-section"><span>{{textX}} : </span> <span>{{lng}}</span><span>{{unit}}</span></div>
            <div class="coordinate-section"><span>{{textY}} : </span> <span>{{lat}}</span><span>{{unit}}</span></div>
            <div class="coordinate-section-long"><span>相机高度 : </span> <span>{{height}}m</span></div>
        </div>
        <!--        </div>-->
    </div>
</template>

<script>
    export default {
        name: "MouseFocusCoordinate",
        //import引入的组件需要注入到对象中才能使用",
        components: {},
        data() {
            //这里存放数据",
            return {
                type:"Cartesian",
                textX:"经度",
                textY:"纬度",
                lng: 0, //经度
                lat: 0, //纬度
                height: 0, //相机高度
                unit:"°" //单位
            };
        },
        //监听属性 类似于data概念",
        computed: {},
        //监控data中的数据变化",
        watch: {},
        //方法集合",
        methods: {
            changeType(){
                if (this.type==="Cartesian"){ //笛卡尔--->经纬度
                    this.type="Degrees";
                    this.textX="X";
                    this.textY="Y";
                    this.unit="m";
                }else if(this.type==="Degrees"){ //经纬度--->笛卡尔
                    this.type="Cartesian";
                    this.textX="经度";
                    this.textY="纬度";
                    this.unit="°";
                }
                this.getPosition()
            },
            getPosition(){
                if (!viewer.scene.globe.depthTestAgainstTerrain){
                    viewer.scene.globe.depthTestAgainstTerrain = true;
                }
                const _this = this;
                // Mouse over the globe to see the cartographic position
                let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
                handler.setInputAction(function (movement) {
                    let cartesian = viewer.camera.pickEllipsoid(
                        movement.endPosition,
                        viewer.scene.globe.ellipsoid
                    );
                    if (cartesian) {
                        if (_this.type==="Cartesian"){ //笛卡尔坐标
                            _this.textX="经度";
                            _this.textY="纬度";
                            let cartographic = Cesium.Cartographic.fromCartesian(cartesian);
                            _this.lng = Cesium.Math.toDegrees(
                                cartographic.longitude
                            ).toFixed(5);
                            _this.lat = Cesium.Math.toDegrees(
                                cartographic.latitude
                            ).toFixed(5);
                        }
                        else if(_this.type==="Degrees") { //经纬度坐标
                            _this.lng = Cesium.Math.toDegrees(cartesian.x).toFixed(2);
                            _this.lat = Cesium.Math.toDegrees(cartesian.y).toFixed(2);
                        }
                    }
                    _this.height=Math.ceil(viewer.camera.positionCartographic.height).toFixed(0) ;
                }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
            },
        },
        //生命周期 - 创建之前",数据模型未加载,方法未加载,html模板未加载
        beforeCreate() {
        },

        //生命周期 - 创建完成（可以访问当前this实例）",数据模型已加载，方法已加载,html模板已加载,html模板未渲染
        created() {

        },
        //生命周期 - 挂载之前",html模板未渲染
        beforeMount() {

        },

        //生命周期 - 挂载完成（可以访问DOM元素）",html模板已渲染
        mounted() {
            this.getPosition()
        },

        //生命周期 - 更新之前",数据模型已更新,html模板未更新
        beforeUpdate() {

        },
        //生命周期 - 更新之后",数据模型已更新,html模板已更新
        updated() {

        },
        //生命周期 - 销毁之前",
        beforeDestroy() {

        },
        destroyed() {

        },
        //生命周期 - 销毁完成",
        //如果页面有keep-alive缓存功能，这个函数会触发",
        activated() {

        },
    }

</script>

<style scoped>
    .MouseFocusCoordinate {
        position: absolute;
        z-index: 1001;
        right: 5px;
        bottom: 10px;
    }
    .coordinate-label {
        padding: 5px;
        height: 12px;
        font-size: 12px;
        color: #fff;
        background: rgba(10, 31, 59, 0.7);
        cursor: pointer;
    }
    .coordinate-label:hover {
        background: rgba(100, 180, 255, 0.7);
    }


    .coordinate-label div{
        float: left;
    }

    .coordinate-section {
        width: 120px;
    }

    .coordinate-section-long {
        width: 150px;
    }
</style>

